Joke's Blog World

Axure 使用记

引言

记得有段时间想叛变投入产品门下,做一名产品狗。买了本 《Axure RP8网站和APP原型制作从入门到精通》 开始学习怎么使用 Axure来制作原型。好在之前做过 Android,所以上手比较快,几天下来,掌握了基本使用,但中继器和交互部分,还是做的不好。昨天在写博客时,有一部分文字叙述不是很好理解,就想着最好能有示例图。用 Visio 的话,有些地方达不到效果,而且自定义程度不是太理想。突然想到 Axure 似乎可以做到,于是就趁着机会再熟悉一下这个强大的软件工具。


首先,Axure 是一款专业的原型设计工具,可以设计出交互效果良好的产品原型,常用于互联网产品设计、网页设计、UI设计等领域。用它可以做出高交互的页面和动画效果。我,作为一个刚学习使用的菜鸟,就只能用来做做低保真原型、实现一些简单的交互以及做一些示例图。

1. 用 Axure 制作 APP 原型

这是在学习用 Axure 制作原型时,自己做的一个图书馆 APP 的低保真原型,实现了部分简单的交互。

一、导航页

导航页一:

导航页一

导航页二:

导航页二

二、注册登录

登录注册主页:

登录注册主页

登录页:

登录页

学号绑定页:

学号绑定页

注册页2:

注册页2

三、内容界面

底部 Tab —— Home:

底部 Tab —— Home

底部 Tab —— Search

底部 Tab —— Search

底部 Tab —— Library

底部 Tab —— Library

底部 Tab —— Find

底部 Tab —— Find

底部 Tab —— Mine

底部 Tab —— Mine

四、APP 一些细节

借阅管理:

这部分在设计时,考虑到用户会忘记自己已借阅书籍的时间,所以通过颜色 + 数字来醒目、直观的让用户获知到书籍的借阅时间。三种颜色分别表示:蓝色(在约定借阅时间内)、红色(即将到还阅时间)、橙色(借阅逾期)。

借阅管理

侧滑菜单 —— 索书收藏夹:

这个功能设计的目的是方便用户找书,在用户搜索到相关书籍之后,在书籍的详情页点击加入,就可以将当前图书的索书号及书本简略信息加入侧滑菜单的索书收藏夹。

添加图书到收藏夹

侧滑菜单

阅读统计:

自从“淘宝时光机”的出现,这类基于用户数据分析的场景总能引起用户的关注,火遍朋友圈。所以,加入阅读统计,让用户可以分享自己的阅读数据,可以提升 APP 活跃度以及趣味性。

阅读统计

用户详情:

用户详情

2. 用画示例图

昨天试着用 Axure 画了几个示例图,发现挺好用的。

图一:

比如要说明 CSS 规范中的17种标准颜色,文字没有办法直观地展示。用 Axure 制作一个表格,然后在为各个表项添加内容,实现很简单。当然,使用 HTML+CSS 也能达到这种效果,这部分我还不熟悉,以后有机会可以试试。

table-color

图二:

也可以根据自己的需要来制作。

外边距合并1

图三:

当然,做表格什么的,也是没问题的,很简单。

table